<template>
  <div style="height: 100%;">
    <el-container style="height: 100%;">
      <el-header height="20%">
        <div class="cl" style="background-color: #0D0D0D;height: 60px;width: 95%;padding-left: 5%;padding-top: 10px;">
          <span style="font-weight: 400;font-size: 32px;color: whitesmoke;">
            典 当 后 台 管 理 系 统
          </span>

          <span class="rf" style="margin-top: 30px;margin-right: 2%;color: white;font-family: 宋体;text-decoration: underline" @click="logout">
            退 出
          </span>
          <span class="rf" style="margin-top: 31px;margin-right: 2%;color: white;font-family: 宋体;text-decoration: underline" @click="$router.push('/findAdminInfo')">
            个人中心
          </span>
          <div class="rf" style="margin-top: 30px;margin-right: 2%;">
            <el-badge :type="num>0?'danger':'info'" :value="num" class="item">
              <i class="el-icon-s-order" @click="$router.push('/dealGoods')" style="color: white;font-size: 24px;"></i>
            </el-badge>
          </div>
        </div>
      </el-header>
      <el-container style="height: 80%;">
        <el-aside width="250px">
          <el-row class="lf">
            <el-scrollbar style="100%">
              <el-col :span="24" style="min-height:80%;">
                <el-menu
                  id="menu"
                  style="text-indent: 1.6em;"
                  active-text-color= #E9C341
                  class="el-menu-vertical-demo"
                  >

             <el-submenu v-for="(m,n) in menus" :key="m.id" :index="n+''">
               <template slot="title">
                 <i style="margin-right: 40px;" class="el-icon-location"></i>
                 <span class="menu1">{{m.menuName}}</span>
               </template>

               <el-menu-item-group class="menu2" v-for="(me,i) in m.children" :key="me.id">
                 <el-menu-item :index="n+'-'+i+''" @click="route(me.menuPath)"  class="menu1">{{me.menuName}}</el-menu-item>
               </el-menu-item-group>
             </el-submenu>

                </el-menu>
              </el-col>
            </el-scrollbar>
          </el-row>
        </el-aside>
        <el-main class="lf">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default{
    name:"Main",
    data(){
      return{

        //查找待办参数
        find:{
          pageNum:1,
          pageSize:-1
        },
        //待办个数
        num:0,
        //菜单集合
        menus:[]
      }
    },
    methods:{
      logout(){
        sessionStorage.clear()
        localStorage.clear()
        this.$router.push("/")
      },
      loadAllMenu(){
      	this.$http.get("/admin/menu/loadAllMenuBy").then(resp=>{
     	   this.menus=resp.data.data
         let route = []
         for (var i = 0; i < this.menus.length; i++) {
           let l = this.menus[i].children
           for (var j = 0; j < l.length; j++) {
             let path = l[j].menuPath
             // route = route+path+","
             route.push(path)
           }
         }
         console.log(route)
         sessionStorage.setItem("route",JSON.stringify(route))
      	})
      },
      route(menuPath){
        this.$router.push(menuPath)
      },

		/**
       * 查找待办
       */
      findProcessByAccountId(){
        this.$http.post("/goods/processExecute/findProcessByAccountId",this.find).then(resp=>{
          let data = resp.data.data
          if(data!=null&&data.records!=null){
            this.num = data.records.length
          }else{
            this.num = 0
          }
        })
      }
    },
    created(){
      this.findProcessByAccountId()
      this.loadAllMenu()
    }
  }
</script>

<style>
  .el-menu::-webkit-scrollbar {
    display: none;
  }
  .el-container{
    height: 100%;
  }
  .el-menu-vertical-demo {
    height: 100%;
    display: block;
    position: relative;
    overflow-y: scroll;
    background-color: #333333;
  }
  .el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover{
  background-color: #5a5a5a;
  }
  .el-submenu__title{
    padding: 0px !important;
    width: 248px;
  }
  .menu2{
   background-color: #333333;
  }
  .menu1{
   color: white;
   font-size: 18px;
  }
  #menu{
   background-color: #333333;
   color: white;
  }
  .home-container{
    height: 100%;
  }
  .el-aside{
    background-color:#333333;
    min-height: 93.1vh;
    padding-top: 10px;
  }
  .el-main{
    background-color: #F2F2F2;
    padding: 0;
  }
  .el-header{
    padding: 0;
    margin: 0;
    display: flex;
  }
  .lf {
    float: left;
  }
  .rf {
    float: right;
  }

  .cl::after {
    content: '';
    display: block;
    clear: both;
  }
</style>
